<template>
  <view class="goods_list">
      <ugo-search></ugo-search>
    <u-tabs
      :list="list"
      :is-scroll="false"
      :current="current"
      @change="change"
      active-color="#ea4350"
      bar-width="150"
    ></u-tabs>
        <!-- tabs对应的内容 -->
             <!--  综合 -->
    <view v-if="current===0">
        <!-- 盒子最外层 -->
      <view class="goods-content">
          <!-- 元素层 -->
          <navigator class="goods-item" v-for="item in goods" :key="item.goods_id"  :url="`/pages/goods_detail/goods_detail?goods_id=${item.goods_id}`">
              <!-- 商品图片层 -->
              <view class="goods-item-img">
                  <!-- 如果没有图片的情况下可以设置一个默认图片，担心图片大小渲染出来不一致所以我们可以按照效果图大小写死 -->
                  <u-image :src="item.goods_small_logo||src" width="191" height="191"></u-image>
              </view>
              <!-- 商品信息层 -->
              <view class="goods-item-info">
                  <view class="goods_name">{{item.goods_name}}</view>
                  <view class="goods_price">￥{{item.goods_price}}</view>
              </view>
          </navigator>
      </view>
    </view>
    
    <view v-if="current===1">
      <!--  销量 -->
      销量销量销量销量
    </view>
    <view v-if="current===2">
      <!--  价格 -->
      价格价格价格价格
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          name: "综合",
        },
        {
          name: "销量",
        },
        {
          name: "价格",
        },
      ],
      current: 0,
    //   商品列表
    goods:[],
    // 默认图片
    src:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.2qqtouxiang.com%2Fpic%2FTX9669_01.jpg&refer=http%3A%2F%2Fimg.2qqtouxiang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648372748&t=bdad7fa9a3908defe372556a009ae987'
    };
  },
  methods: {
    //   激活选中，传一个index进去
    change(index) {
      this.current = index;
    },
        // 获取商品列表数据
    async getGoodsList() {
      const res = await this.$u.http.get("/goods/search", this.params);
      console.log(res);
      // 获取要渲染的数据  新旧数组合并
    this.goods = [...this.goods, ...res.goods];
            // 获取数据总条数
      this.total = res.total;
    },
  },
  onLoad(options) {
    const { cid } = options;
    // 定义 接口要的参数
    this.params = {
      // 否	string	关键字
      query: "",
      // 否	string	分类id
      cid: cid,
      // 否	number	页码
      pagenum: "1",
      // 否	number	页容量
      pagesize: "20",
    };

    // 调用发送请求获取数据接口
    this.getGoodsList();
  },
    //   滚动条触底刷新
     onReachBottom(){
        //  判断还有没有数据
        if(this.goods.length>=this.total){
            // 没有下一页数据
        uni.showToast({
        title: "没有下一页数据啦",
        icon: "none",
      });
      return;
        }
        // 页码+1
        this.params.pagenum++
        // 调用接口
        this.getGoodsList();
     },
    //  在pages.json页面的商品列表开启下拉刷新
   async onPullDownRefresh(){
        // console.log(111);
        // 重置页面的数据
        this.goods=[]
        // 重置页码
        this.params.pagenum=1
        // 发请求
       await this.getGoodsList()
        // 等数据拿回来后关闭下拉刷新
          uni.stopPullDownRefresh();
    }
}
</script>
<style lang="scss">
.goods-content{
    .goods-item{
        display: flex;
            margin-bottom: 15rpx;
            border-bottom: 1px solid #ccc;
        .goods-item-img{
            flex: 1;
            display: flex;
            // align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
            align-items: center;
            // 主轴居中对齐
            justify-content: center;
        }
        .goods-item-info{
            flex: 2;
            display: flex;
            // 垂直显示
            flex-direction: column;
            // 均匀排列每个元素
            justify-content: space-around;
            .goods_name{
            }
            .goods_price{
                color:$theme-color
            }
        }
    }
}
</style>